<template>
  <div class="center">
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand">{{title}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable">
      <el-row type="flex" justify="center" style="min-height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div  style="float: left;width: 55%;">
            <el-row>
              <el-col style="width: 40px;margin-right: 5px;">
                <h5>搜索 : </h5>
              </el-col>
              <el-col :span="20" class="interviewtrack">
                <el-select size="small" v-model="customername" @change="customerChange" placeholder="请选择客户简称"
                           style="margin-right: 10px;">
                  <el-option v-for="item in customerList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-select size="small" v-model="no" @change="noChange" placeholder="请选择需求编号"
                           style="margin-right: 10px;">
                  <el-option v-for="item in noList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-select size="small" v-model="times" @change="timesChange" placeholder="请选择面试次数">
                  <el-option v-for="item in typeList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </div>
          <div style="float: right;">
            <el-row type="flex" justify="space-between"  class="btn">
              <el-input
                size="small"
                placeholder="请输入内容"
                style="width: 136px;"
                v-model.trim="inputValue"
                @keyup.enter.native="searchMsg"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="searchMsg"
                ></i>
              </el-input>
              <div style="margin-left: 5px;">
                <el-button
                  class="edit"
                  @mousedown.native="editdown"
                  @mouseup.native="editup"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  @click="editshow"
                  round
                >修改
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            @selection-change="handleSelectionChange"
            :row-key="getRowKey"
            class="tableT"
          >
            <el-table-column
              type="selection"
              style="border:1px solid #333"
              :reserve-selection="true"
              width="55">
            </el-table-column>
            <el-table-column prop="name" width="100" label="姓名"></el-table-column>
            <el-table-column prop="customerName" v-if="postCustomer" label="推送客户"></el-table-column>
            <el-table-column prop="postName" label="推送职位"></el-table-column>
            <el-table-column prop="postLevel" label="职位级别"></el-table-column>
            <el-table-column :label="time">
              <template slot-scope="scoped">
                <span>{{scoped.row.candidateTime | converTime("YYYY-MM-DD HH:mm")}}</span>
              </template>
            </el-table-column>
            <el-table-column label="专员反馈面试时间">
              <template slot-scope="scoped">
                <span>{{scoped.row.assistantFeedResult}}</span>
              </template>
            </el-table-column>
            <el-table-column label="客户反馈面试时间">
              <template slot-scope="scoped">
                <span>{{scoped.row.customerFeedbackTime}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="错误"
      :visible.sync="sendDialogVisible"
      width="415px"
      :before-close="cancel"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">请每次修改一份简历</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="confirm">确 定</el-button>
        <el-button round @click="cancel" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="修改专员反馈面试时间"
      class="addP"
      :visible.sync="dialogFormVisible"
      width="415px"
      :before-close="cancelEditL"
    >
      <div class="contentR">
        <p style="margin:10px 0;">请选择反馈情况</p>
        <el-row>
          <el-radio v-model="radio" label="1">选择面试时间</el-radio>
          <el-radio v-model="radio" label="2">放弃面试时间</el-radio>
        </el-row>
        <el-form :model="formL" class="formList" :rules="rulesL" ref="formL" label-position="top" v-if="radio == '1'">
          <el-form-item label="专员反馈时间" prop="customerTimeL">
            <el-date-picker
              v-model="formL.customerTimeL"
              type="datetime"
              placeholder="请选择时间"
              align="right"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <el-form :model="formF" class="formList" :rules="rulesF" ref="formF" label-position="top" v-if="radio == '2'">
          <el-form-item label="放弃面试时间" prop="customerTimeF">
            <el-date-picker
              v-model="formF.customerTimeF"
              align="right"
              type="date"
              placeholder="请选择放弃面试时间"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="editTimePostL('formL','formF')">确 定</el-button>
        <el-button round @click="cancelEditL" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="415px"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何简历</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleClose">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogNoVisible"
      width="415px"
      :before-close="handleNoClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">统一接口人不同!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleNoClose">确 定</el-button>
        <el-button round @click="handleNoClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import axios from "axios"
  import qs from "qs"
  
  export default {
    name: "fieldinterview",
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        title: "现场面试",
        customername: "",
        times: "",
        radio: "1",
        no: "",
        noList: [],
        time: "一面时间",
        inputValue: "",
        newcolor: false,
        newcolor1: false,
        newcolor2: false,
        tableData: [],
        texthtml: "",
        maildata: [],
        customerList: [],
        currentPage: 1,
        pagesize: 15,
        mail: "",
        copymail: [],
        typeList: [],
        totalcount: 0,
        multipleSelection: [],
        postCustomer: true,
        editdialogVisible: false,
        dialogFormVisible: false,
        sendDialogVisible: false,
        editdialogNoVisible: false,
        theme: "",
        themelist: [],
        formL: {
          customerTimeL: ""
        },
        rulesL: {
          customerTimeL: [
            {required: true, message: "请选择面试时间", trigger: "change"}
          ]
        },
        formF: {
          customerTimeF: ""
        },
        rulesF: {
          customerTimeF: [
            {required: true, message: "请选择放弃面试时间", trigger: "change"}
          ]
        },
      }
    },
    created() {
      this.success();
      axios.get(this.url + "/onsite/customerList")
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.customerList = res.data.data
          }
        })
    },
    methods: {
      success() {
        axios.post(this.url + "/onsite/queryCusList",{
          type: this.times,
          customer: this.customername,
          requireNo: this.no,
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize,
        })
          .then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
            }
          })
      },
      customerChange(val) {
        this.no = '';
        this.time = '';
        this.postCustomer = false;
        axios.post(this.url + "/onsite/getRequireNo", qs.stringify({
          customerName: val
        })).then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.noList = res.data.data
          }
        });
        if (this.times && this.no) {
          this.currentPage = 1;
          this.success();
        }
      },
      themeChange(val) {
        axios.post(this.url + "/mailreplay/getcontent", {
          sub: val
        }).then(res => {
          this.unlogin(res.data.code)
          if (res.data.code == 200) {
            this.texthtml = res.data.data
          }
        })
      },
      timesChange() {
        if (this.customername && this.no) {
          this.currentPage = 1;
          this.success();
        }
      },
      noChange(val) {
        this.times = "",
          axios.post(this.url + "/onsite/getTypeByNo", qs.stringify({
            No: val
          })).then(res => {
            this.unlogin(res.data.code)
            if (res.data.code == 200) {
              this.typeList = res.data.data
            }
          })
        if (this.customername && this.times) {
          this.currentPage = 1;
          this.success();
        }
      },
      searchMsg() {
        this.currentPage = 1;
        this.success();
      },
      //鼠标按下转结果按钮
      perfectDown() {
        this.newcolor = true;
      },
      //点击按钮弹起
      perfectUp() {
        this.newcolor = false;
      },
      //鼠标按下修改按钮
      editdown() {
        this.newcolor1 = true;
      },
      //修改按钮弹起
      editup() {
        this.newcolor1 = false;
      },
      // 检查按钮按下
      sendDown() {
        this.newcolor2 = true;
      },
      // 检查按钮弹起
      sendUp() {
        this.newcolor2 = false;
      },
      // 修改按钮点击
      editshow() {
        if (this.multipleSelection.length === 1) {
          this.dialogFormVisible = true;
          document.documentElement.style.overflow = "hidden";
        } else if (this, multipleSelection.length === 0) {
          this.editdialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        } else {
          this.sendDialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.success();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.success();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.maildata = JSON.parse(JSON.stringify(val));
      },
      // 尚未选择任何简历对话框关闭
      handleClose() {
        this.editdialogVisible = false;
        document.documentElment.style.overflow = "auto";
      },
      getRowKey(row) {
        return row.id
      },
      // 修改面试时间对话框确定按钮点击
      editTimePostL(formName, formName2) {
        if (this.radio == "1") {
          this.$refs[formName].validate(valid => {
            if (valid) {
              axios.post(this.url + "/onsite/upAssistantTime", qs.stringify({
                id: this.multipleSelection[0].id,
                assistantTime: "Y",
                assistantFeedTime: this.formL.customerTimeL
              })).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  this.dialogFormVisible = false;
                  document.documentElement.style.overflow = 'auto';
                  this.$refs.singleTable.clearSelection();
                  if (this.times) {
                    this.time = this.times + "时间"
                  } else {
                    this.time = "一面时间"
                  }
                  this.$refs.formL.resetFields();
                  this.success();
                }
              })
            }
          })
        } else {
          this.$refs[formName2].validate(valid => {
            if (valid) {
              axios.post(this.url + "/onsite/upAssistantTime", qs.stringify({
                id: this.multipleSelection[0].id,
                assistantTime: "N",
                assistantFeedTime: this.formF.customerTimeF
              })).then(res => {
                this.unlogin(res.data.code);
                if (res.data.code == 200) {
                  this.dialogFormVisible = false;
                  document.documentElement.style.overflow = 'auto';
                  this.success();
                  this.$refs.singleTable.clearSelection();
                  if (this.times) {
                    this.time = this.times + "时间"
                  } else {
                    this.time = "一面时间"
                  }
                  this.$refs.formL.resetFields();
                  
                }
              })
            }
          })
        }
        
      },
      // 修改面试时间对话框取消按钮点击
      cancelEditL() {
        this.dialogFormVisible = false;
        document.documentElement.style.overflow = 'auto';
        this.$refs.singleTable.clearSelection();
      },
      confirm() {
        this.sendDialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      cancel() {
        this.sendDialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      handleNoClose() {
        this.editdialogNoVisible = false;
        document.documentElement.style.overflow = "auto";
      }
    },
    watch: {
      "inputValue": function (val) {
        if (val == "") {
          this.currentPage = 1;
          this.success();
          if (this.times) {
            this.time = this.times + "时间"
          } else {
            this.time = "一面时间"
          }
        }
      },
      "times": function (val) {
        if (val == "一面" || val == "") {
          this.time = "一面时间"
        } else if (val == "二面") {
          this.time = "二面时间"
        } else {
          this.time = "三面时间"
        }
      },
    }
  }
</script>
<style scoped>
  .hand {
    color: #1099ff;
  }
  
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .perfect {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
    padding: 7px 15px !important;
  }
  
  .perfect:hover {
    color: #fff !important;
  }
  
  .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  .send {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
    padding: 7px 15px !important;
  }
  
  .send:hover {
    color: #fff !important;
  }
  
  .active {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }
  
  .active1 {
    background: linear-gradient(to bottom, #1cf1e3 0%, #379b94 100%);
  }
  
  .active2 {
    background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .resumeLink {
    cursor: pointer;
    color: #1198ff;
    text-decoration: none;
  }
  
  
  .line {
    height: 1px;
    background-color: #c8c8c8;
    margin-top: 3px;
    margin-bottom: 20px;
  }
  
  .darkline {
    height: 1px;
    background-color: #4288c3;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  
  .lightLine {
    height: 1px;
    background-color: #cccccc;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  @media screen and (min-width: 600px) and (max-width: 1700px) {
    .dialogBox {
      height: 400px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
  
  
  @media screen and (min-width: 1701px) and (max-width: 1920px) {
    .dialogBox {
      height: 600px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
  
  .tabletitle {
    margin-left: 20px;
    min-height: 50px;
    line-height: 50px;
  }
</style>
